<!DOCTYPE html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>moon</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery.js"></script>
	<script src="js/echarts-gl.js"></script>
	<script src="js/echarts-min-gl.js"></script>
	<script src="js/toggle.js"></script>
	<link href="css/moon.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="moon" style="height:700px;"></div>
	<div id="moon_knowledge">
		<a onclick="change(this)"style="cursor: pointer;color:white;font-size:1em;" >月球的信息</a><br>
		<a id="sj" onclick="change(this)"style="cursor: pointer;color:white;font-size:1em;">有关月亮的诗句</a><br>
		<a id="dygx" onclick="change(this)"style="cursor: pointer;color:white;font-size:1em;">地月的关系</a><br>
		<a id="xy" onclick="change(this)"style="cursor: pointer;color:white;font-size:1em;">血月的形成</a><br>
		<a id="ysk" onclick="change(this)"style="cursor: pointer;color:white;font-size:1em;">陨石坑</a><br>
	</div>
	
		<img id="pic" src="" onmouseover="bigger()" onmouseout="smaller()"/>
		<textarea id="show"></textarea>
	
	
    <script type="text/javascript"> 
		$(document).ready(function(){
		$("#dygx").click(function(){
			$("#show").load('zhishi/地月关系.txt');
		  });
		  $("#xy").click(function(){
			$("#show").load('zhishi/血月.txt');
		  });
		  $("#ysk").click(function(){
			$("#show").load('zhishi/陨石坑.txt');
		  });
		  $("#sj").click(function(){
			$("#show").load('zhishi/诗句.txt');
		  });
		});
	<!-- 放大缩小操作 -->
			var img = document.getElementById('pic'); 
			function bigger(){  img.style.width = '600px';  img.style.height = '500px'; } ;
			function smaller(){  img.style.width = '300px';  img.style.height = '200px'; };
	<!-- 显示知识点 -->
			function change(btn){
			var pic=document.getElementById('pic');
			var video=document.getElementById('video');
			var myJson={"月球的信息":"image/moon/moon_info.jpg","陨石坑":"image/moon/moon1.png","血月的形成":"image/moon/xy.gif","地月的关系":"image/moon/moon2.jpg"};
			for(var key in myJson){
				if(key==btn.innerText)
				pic.src=myJson[key];
			}
		};
	<!-- 3D月球 -->
			var  moon =  echarts.init(document.getElementById('moon'));
              moon_option = {
					backgroundColor: '#000',
					globe: {
						baseTexture: 'image/moon1.jpg',
						heightTexture: 'image/moon2.jpg',
						globeRadius:40,
						displacementScale: 0.05,
						displacementQuality: 'medium',

						environment: 'image/plant_moon.jpg',

						shading: 'realistic',
						realisticMaterial: {
							roughness: 0.8,
							metalness: 0
						},

						postEffect: {
							enable: true,
							SSAO: {
								enable: true,
								radius: 2,
								intensity: 1,
								quality: 'high'
							}
						},
						temporalSuperSampling: {
							enable: true
						},
						light: {
							ambient: {
								intensity: 0
							},
							main: {
								intensity: 0.3,
								shadow: true
							},
							ambientCubemap: {
								
								exposure: 0,
								diffuseIntensity: 0.02
							}
						},
						viewControl: {
							autoRotate: true,
						}
					},
					series: []
				};
                moon.setOption(moon_option);
    </script>
</body>